Foto's klaarstomen voor het web 


Efficiënte internetbeelden 


Als je regelmatig surft, is het je ongetwijfeld al overkomen dat je bij het bezoeken van een 
website ellendig lang moest wachten vooraleer alle afbeeldingen binnengehaald waren. 
Heb je zelf een website, en wil je voorkomen dat jouw bezoekers andere oorden opzoeken 
omdat ze te lang moeten wachten? Dan is deze workshop iets voor jou! 4 avor srevens 


e bent op vakantie geweest, en nu wil je — met de hulp van deze 

Clickx — een website op poten zetten waarop je je vakantiekiek- 
jes kan tentoonspreiden. In deze workshop focussen we ons niet op het 
maken van de eigenlijke website — neem gerust een kijkje op pagina 18 
voor meer informatie over webbouwpakketten — maar wel op het klaar- 
stomen van je beeldmateriaal voor gebruik op het web. Want dat wordt 
al te vaak vergeten, waardoor het soms eeuwen duurt om een webpa- 
gina in te laden. We gebruiken hiervoor Photoshop Elements 4 (€ 99, 
proefversie op www.adobe.bd). Wij installeerden een Engelstalige versie, 
maar dat hoeft geen probleem te zijn: op vind je bij de 


AanvuLLers een woordenlijst waarin alle termen vertaald worden. 


STAP 1 / AFBEELDING VERBETEREN 


Het is alvast géén goed idee om al de beelden die je wil gebruiken van 
je digitale camera te halen en op je pc te zetten, om ze vervolgens te 
importeren en te herschalen in een WYSIWYG-webeditor. Want het 
plaatje mag dan wel klein weergegeven worden, het is uiteindelijk de 
grootte van het bronbestand die telt. 

Open een van je foto’s die je online wil aanbieden in Photoshop Elements 
4 (PSE). Je wil natuurlijk geen foto's met fletse kleuren of slechte 
contrasten, dus laten we er een paar filters van PSE op los. In het menu 
ENHANcE kan je kiezen voor Auto Smart Fix of — als je daar niet tevreden 
mee bent — een van de andere automatische fixers, zoals Auto Levers, 
Auto Contrast of Auro CoLor Correction (zie afbeelding 1). Nog makkelijker 
is om het QuickFix-menu op te roepen door rechts bovenaan op de 
gelijknamige knop te klikken. Hier kan je een beetje met de schuivertjes 
spelen om zo het beste resultaat te bekomen (of op Auro klikken). Als 
je klaar bent, druk je weer op Sranparp Eprr. 


B Adobe Photoshop Elements 4.0 (Editor) Kreta (188).jpg @ 33,3% 
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Het is altijd een goed idee om de contrasten en kleuren van je beeld te 
optimaliseren voor je begint. 
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Herleid je beeld tot de 
essentie en knip over- 
bodige lucht en stenen 
gerust weg. 


STAP 2 / COMPOSITIE HERBEKIJKEN 


Onze afbeelding is met z’n 1600 x 1200 pixels veel te groot om op een 
website te gebruiken. We zullen het beeld dus een heel plak kleiner 
moeten maken, en dat betekent dat bij sommige afbeeldingen (zoals 
landschapsfoto's) de details veel minder goed zichtbaar zullen zijn. 
Daarom is het geen slecht idee om de compositie van je foto te her- 
bekijken, en er eventueel een detail uit te lichten. Bij de meeste foto’s 
is er altijd wel wat lucht of een hoop stenen in de voorgrond die gerust 
weggeknipt mogen worden. Dat doe je in PSE met de Crop-functie (die 
je in de gereedschapsbalk terugvindt net onder de Texr-tool). Selecteer 
het gereedschap, en sleep met de muis een kader rond het stuk van 
de foto dat je wil bewaren — je kan de randen nadien nog verslepen. 
Als je klaar bent met je selectie, klik je op het vinkje onderaan het 
Crop-kader om te bevestigen (zie afbeelding 2). 


STAP 3 / RESOLUTIE AANPASSEN 


Tijd om de resolutie aan te passen! Deze waarde wordt uitgedrukt in 
pixels per inch (aantal beeldpunten per 2,54 cm), en zegt iets over de 
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mate waarin beeldpunten bij elkaar gedrukt worden. Als je beelden wil 
afdrukken, heb je minstens 300 pixels per inch nodig, maar beeldscher- 
men kunnen niet meer dan 72 ppi weergeven, dus waarom zou je foto 
er dan meer nodig hebben? 

Selecteer in het menu Imace de optie Resize en klik dan op Imaae Size. 
Heel wat digitale camera’s maken sowieso beelden aan 72 ppi, maar de 
beelden die wij geschoten hebben, hebben een resolutie van 180 ppi. 
We vinken onderaan het venster de optie ResampLe Image aan, en veran- 
deren dan de waarde van ResoLurron naar 72 (zie afbeelding 3). Je ziet 
bij Prxer Drmenstons dat je afbeelding ineens een pak kleiner is geworden, 
en dat is ook de bedoeling. Klik op OK om het venster te sluiten. 


STAP 4 / AFMETINGEN VERANDEREN 


Door de resolutie te veranderen, zijn dus ook de afmetingen verkleind, 
maar misschien is je beeldje nog niet klein genoeg. Hoe klein moet het 
dan precies worden? Daar bestaan geen regels voor. Het hangt immers 
af van foto tot foto, en veel heeft ook te maken met hoe je je foto’s 
op je website wil integreren. Experimenteer zelf een beetje met de 
afmetingen om te zien wat het beste resultaat oplevert. Duik opnieuw 
in het menu Imace, waar je Resize en Imace Size aanklikt. Pas nu naar 
hartenlust bij PixeL Dimenstons de WiptH- en Herent-waardes aan, maar 
zorg wel dat onderaan de optie Constrarn Proportions aangevinkt is — an- 
ders zal het beeld er vervormd uitzien als je op OK klikt. 


STAP 5 / OPSLAAN VOOR HET WEB 


In de begindagen van Photoshop en van digitale beeldbewerking in het 
algemeen, moest je alle moeite van de wereld doen om de grootte van 
je bestand binnen de perken te houden. Maar sinds een hele tijd is 
Photoshop al uitgerust met een superhandige functie: Save For Wes. Je 
vindt deze optie terug in het menu Fre. Je ziet nu twee keer je afbeel- 
ding verschijnen: links staat het originele beeld, en rechts het beeld 
zoals je het gaat bewaren. Aan de rechterkant van het venster kan je 
de instellingen wijzigen. De belangrijkste instelling vind je bij Preser. 
Daar kan je immers kiezen of je je foto opslaat in het jpeg-, gif- of (het 
veel minder gebruikte) png-formaat. In de meeste gevallen kan je hier 
JPEG kiezen, maar lees er toch even ons kaderstukje ‘Gif of jpg?’ op 
na. Vervolgens kan je bij Quaurry de kwaliteit bepalen. Hoe lager je deze 
waarde instelt, hoe kleiner de bestandsgrootte van je foto zal zijn. Maar 


GIF OF JPG? 


Het verschil tussen de twee populairste bestandsformaten voor 
beelden op het web is veel mensen nog niet echt duidelijk. Het 
is nochtans heel simpel: voor foto’s; afbeeldingen met veel kleur- 
nuances gebruik je best jpg; voor logo's, icoontjes en andere 
beelden met grote kleurvlakken gebruik je gif. 

De gif-standaard kan namelijk maar 256 kleuren weergeven en 
zoekt in een afbeelding naar kleurvlakken die bij elkaar aanslui- 
ten. Compressie met jpg daarentegen kan veel meer kleuren 
weergeven, maar laat gewoon hier en daar wat beeldinformatie 
weg, om de bestandsgrootte kleiner te maken. Als je toch twijfelt, 
kies je best voor jpg, omdat dat vaak de beste resultaten ople- 
vert. Neem ook eens een kijkje op 
daar krijg je tal van voorbeelden die de verschillen nog 
eens duidelijk in de verf zetten. 


Het verschil tussen jpg (links) en gif (rechts) is enorm. 


je moet wel opletten dat je het niet té laag instelt, want dan wordt je 
foto één grote waas. Met een waarde tussen 40 en 60 zit je meestal 
wel goed (zie afbeelding 5). Onderaan zie je hoe groot het bestand zal 
worden, en ook hier is het een kwestie van experimenteren en het 
juiste evenwicht zoeken tussen een zo klein mogelijk bestand met een 
zo hoog mogelijke kwaliteit. Vink ook de optie Proaressive aan — dat 
zorgt er voor dat de afbeelding in verschillende lagen’ wordt binnen- 
gehaald en dat je bezoeker al meteen iets te zien krijgt (en niet moet 
wachten tot het beeld helemaal is gedownload). « 


Experimenteer met de instellingen tot je een goed evenwicht tussen bestandsgrootte en 
kwaliteit hebt gevonden. 
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